<template>
	<view class="learn-container">
		<view class="learn-list" v-for="(item, index) in list" :key="item.id" @click="toInfo(item)">
			<view class="learn-list-img">
				<image :src="'../../static/imgs/article/' + item.img" mode="widthFix">
			</view>
			<view class="learn-list-title">{{item.title}}</view>
			<view class="learn-list-content">{{item.content}}</view>
			<view class="learn-list-time">更新时间: {{item.time}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 0,
						img: "1.jpg",
						title: "前端性能优化实战",
						content: "前端性能优化实战提升首屏的加载速度,是前端性能优化中最重要的环节,这里笔者梳理出一些常规且有效的首屏优化",
						time: "2023/03/21",
						read: 323,
						up: 87
					},
					{
						id: 1,
						img: "1.jpg",
						title: "前端性能优化实战",
						content: "前端性能优化实战提升首屏的加载速度,是前端性能优化中最重要的环节,这里笔者梳理出一些常规且有效的首屏优化",
						time: "2023/03/21",
						read: 323,
						up: 87
						
					}
				]
			};
		},
		methods: {
			toInfo(item){
				uni.navigateTo({
					url:"/pages/learninfo/learninfo?data=" + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss">
	.learn-container {
		padding: 20rpx;

		.learn-list {
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #d1d1d1;

			.learn-list-img {
				border-radius: 5px;
				overflow: hidden;

				image {
					width: 100%;
				}

			}

			.learn-list-title {
				padding: 10rpx 0;
				font-size: 34rpx;
			}

			.learn-list-content {
				font-size: 30rpx;
				color: #707070;
				line-height: 44rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.learn-list-time {
				text-align: right;
				font-size: 28rpx;
				color: #818181;
				margin-top: 20rpx;
			}
		}
	}
</style>
